<template>
    <div class="menu-box-warp">
        <div class="menu-box d-flex j-center">
            <div class="menu-item" v-for="(item,index) in labList" @click="menuClicked(item)">
                <div class="menu-icon d-flex j-center pt-30" v-if="!item.empty">
                    <img :src="require(`../../assets/menu/i${item.sortId}.png`)" alt="" width="106" height="111">
                </div>
                <div class="menu-name" v-if="!item.empty">{{item.menuName}}</div>
            </div>
        </div>
        <div style="display: inline-block; position: absolute; top: 27%;left: 35px;" @click="toLeft()">
            <img src="../../assets/menu/jtz.png" alt="" />
        </div>
        <div style="display: inline-block; position: absolute; top: 27%;right: 35px;" @click="toRight()">
            <img src="../../assets/menu/jty.png" alt="" />
        </div>
        <div class="d-flex a-center j-center" style="position: relative; top:-25px">
            <img v-for="i in maxArr " :key="i" :class="{'mr-5':i!=3}" :src="require(`../../assets/menu/d${i==tabIndx+1?1:2}.png`)" alt=""  @click="goIndex(i)"/>
        </div>
        <!-- <div class="menu-box d-flex j-center">
            <div class="menu-item" v-for="(item,index) in labList">
                <div class="menu-icon d-flex j-center pt-30">
                    <img :src="require(`../../assets/menu/i${item.sortId}.png`)" alt="" width="106" height="111">
                </div>
                <div class="menu-name">{{item.menuName}}</div>
            </div>
        </div>
        <div class="menu-box d-flex j-center">
            <div class="menu-item" v-for="(item,index) in labList">
                <div class="menu-icon d-flex j-center pt-30">
                    <img :src="require(`../../assets/menu/i${item.sortId}.png`)" alt="" width="106" height="111">
                </div>
                <div class="menu-name">{{item.menuName}}</div>
            </div>
        </div> -->
    </div>
</template>
<script>
export default {
  name: "systems",
  props: {
    menuList:{
        default(){
            return []
        }
    }
  },
  computed:{
    maxArr(){
        return Math.ceil(this.menuList.length/5)    
    },
    sortMenulist(){
        return this.menuList.map((item,i) =>{
            item.sortId = i+1;
            return item
        })
    },
    labList(){
        let res = this.sortMenulist.slice(this.tabIndx*5,this.tabIndx*5+5);
        if(res.length<5) {
            let addnum = 5-res.length;
            for(let i=0;i<addnum;i++){
                res.push({empty:true})
            }
        }
        console.log('res: ', res);
        return res;
    }
  },
  data(){
    return {
        tabIndx:0,

    }
  },
  methods:{
    toLeft(){
        this.tabIndx--;
        if(this.tabIndx<0){
            this.tabIndx = this.maxArr-1;
        }
    },
    toRight(){
        this.tabIndx++;
        if(this.tabIndx>this.maxArr-1){
            this.tabIndx = 0;
        }
    },
    goIndex(i){
        this.tabIndx = i-1;
    },
    menuClicked(item){
        if(item.empty){
            return;
        }
        this.$emit('menuClicked',item)
    }
  },
}
</script>
<style scoped lang="scss">
    .menu-box-warp{
        height: 100%;
        margin-top: 90px;
        .menu-box{
            perspective: '1000px';
            transform-style: preserve-3d;
            transform: perspective(2000px) rotateX(20deg);
            .menu-item{
                background-image: url("../../assets/menu/mk3.png");
                background-size: 100% 100%;
                width: 210px;
                height: 276px;
                margin-right: 30px;
                // border: 1px solid #3175d0;
                transform-style: preserve-3d;
                .menu-name{
                    width: 155px;
                    height: 55px;
                    font-weight: bold;
                    font-size: 20px;
                    color: #FFFFFF;
                    line-height: 24px;
                    text-align: center;
                    margin: 20px auto;
                    background-image: url('../../assets/menu/text_bg.png');
                    background-position: 0px 21px;
                    background-size: 100% 100%;
                    background-repeat: no-repeat;
                    
                }
            }
            .menu-item:nth-child(1){
                transform:perspective(1000px) translateZ(45px) rotateY(10deg)
            }
            .menu-item:nth-child(2){
                transform:perspective(1000px) translateZ(12px) rotateY(5deg)
            }
            .menu-item:nth-child(3){
                transform:perspective(1000px) translateZ(0px) rotateY(0deg)
            }
            .menu-item:nth-child(4){
                transform:perspective(1000px) translateZ(12px) rotateY(-5deg)
            }
            .menu-item:nth-child(5){
                transform:perspective(1000px) translateZ(45px) rotateY(-10deg)
            }
            .menu-item:last-child{
                margin-right: 0;
            }
        }
    }
</style>